<template>
  <div class="invalid-product-dialog">

    <el-dialog
      v-model="dialogVisible"
      title="作废"
      width="850px"
      :before-close="handleClose"
    >

      <el-form
        :inline="true"
        label-width="110px"
        class="demo-ruleForm"
      >
        <el-row>

          <el-col :span="12">
            <el-form-item label="编号：">
              {{ formData.agentProductNumber }}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="产品通用名：">
              {{ formData.productPopularName }}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="商品名：">
              <span>{{ formData.productName }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="包装规格：">
              <span>{{ formData.packSpecs }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="生产厂家：">
              <span>{{ formData.producer }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="可营销终端：">
              {{ getLabel('app_mode',formData.terminalType) }}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              label="代理地区："
              prop="areas"
            >
              <area-list-view :areas="formData.region" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              label="交易价："
              prop="tradePrice"
            >

              {{ formData.tradePrice }}元/{{ getLabel('sell_unit',formData.sellUnit) }}

            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="代理期限至：">
              {{ dateFormat('yyyy-mm-dd',formData.agentEndTime) }}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              label="最低销量："
              :prop="formData.agentAttribute == 1 ? 'minSale' :''"
            >

              {{ formData.minSale }}{{ getLabel('sell_unit',formData.sellUnit) }}/{{ getLabel('sell_num_unit',formData.minSaleUnit) }}

            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              label="销量保证金："
              :prop="formData.agentAttribute == 1 ? 'minSalePromise' :''"
            >
              {{ formData.minSalePromise }}元
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              label="负责营销职员："
              prop="headId"
            >
              {{ formData.headName }}
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>
      <el-form
        ref="ruleForm"
        :model="formData"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="作废原因"
          prop="banReason"
        >
          <el-input
            v-model="formData.banReason"
            placeholder="请输入作废原因"
          />
        </el-form-item>

      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button
            type="primary"
            @click="dialogConfirm"
          >提交审核</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import {defineComponent, getCurrentInstance, inject, reactive, ref, toRefs,} from 'vue'

export default defineComponent({
  name: 'InvalidProductDialog',
  emits:['success'],
  setup(props, { emit }) {
    const currentInstance = getCurrentInstance()
    const api = inject('api')
    const rules = ref({
      banReason: [
        {
          required: true,
          message: '请输入作废原因',
          trigger: 'blur',
        },
      ],
    })

    var ruleForm = ref(null)
    var dialogVisible = ref(false)

    var data = reactive({
      formData: {
        productId: 0,
        productPopularName: '',
        approvalNumber: '',
        packSpecs: '',
        sellUnit: '',
        terminalType: '', // 终端客户类型
        agentAttribute: '', // 代理属
        area: [],
        region: [],
        tradePrice: 0, // 交易价
        agentEndTime: '', // 代理结束时间
        minSale: 0, // 最低销量
        minSaleUnit: '1', // 最低销量单位
        minSalePromise: 0, // 销量保证金
        headName: '张三',
        headId: 1,
        remark: '', // 其他约定
        agentId: 0, // 代理商id
        contractId: 0, // 合同id
        banReason: '',
      },
    })

    const dialogConfirm = (a) => {
      ruleForm.value.validate((val) => {
        if (val) {
          currentInstance.proxy
                  .alertBox({
                    message: '是否确认作废该招商要素？',
                    title: '作废',
                  })
                  .then(() => {
                    api.signedAgent.AGENT_PRODUCT_BAN(data.formData).then((res) => {
                      if (!res.code) {
                        currentInstance.proxy.customMessage({
                          type: 'success',
                          message: '操作成功',
                        })
                        emit('success')
                        handleClose()
                      } else {
                        currentInstance.proxy.customMessage({
                          type: 'error',
                          message: res.msg,
                        })
                      }
                    })
                  })
                  .catch((err) => {
                    console.log(err)
                  })

        }
      })

    }

    const handleClose = () => {
      dialogVisible.value = false
      setTimeout(() => {
        ruleForm.value.resetFields()
        ruleForm.value.clearValidate()
      }, 100)
    }

    const openDialog = (a) => {
      a.banReason = ''
      data.formData = a

      dialogVisible.value = true
    }

    return {
      ruleForm,
      dialogVisible,
      ...toRefs(data),
      rules,

      dialogConfirm,
      handleClose,
      openDialog,
    }
  },
})
</script>

<style scoped>
</style>
